<template>
  <div class="change-class body-bg">
    <div class="form">
      <van-cell-group>
        <van-field
          type="number"
          clearable
          maxlength="11"
          label="手机号码"
          :value="phoneNumber"
          placeholder="请输入手机号"
          border="false"
          @change="onChange"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          type="number"
          :value="sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          border="false"
          use-button-slot
          @change="inputYzm"
        >
          <van-button slot="button" size="small" type="primary" v-if="!starCD" @click="getYZM">发送验证码</van-button>
          <van-button slot="button" size="small" type="primary" v-else disabled>
            <!-- 倒计时 -->
            <van-count-down
              class="control-count-down"
              millisecond
              format="ss"
              :time="time"
              @finish="finished"
            />
          </van-button>
        </van-field>
      </van-cell-group>
    </div>
    <div class="set-cont">
      保存此号码供以后授权使用 
      <van-switch
        size="20px"
        :checked="checked"
        active-color="#00B8EE"
        inactive-color="#fff"
        @change="saveToGrant"
      />
    </div>
    <!-- submit -->
    <div class="submit-btn">
      <van-button v-if="!loadingBtn" round color="#00B8EE" block @click="savePhone">绑定</van-button>
      <van-button v-else round disabled="true" :loading="loadingBtn" loading-text="绑定中..." color="#00B8EE" block></van-button>
    </div>
    <!-- 通知对应的节点容器 -->
    <van-notify id="van-notify" />
  </div>
</template>

<script>
import Notify from '../../../static/vant/notify/notify';
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
export default {
  data() {
    return {
      loadingBtn: false,
      phoneNumber: "",
      sms: "",
      time: 0,
      leaveTime: 0,
      starCD: false,
      checked: true
    }
  },
  onUnload() {
    this.starCD = false;
  },
  methods: {
    // 手机号
    onChange(e) {
      this.phoneNumber = e.mp.detail.trim();
    },
    // 获取验证码
    getYZM() {
      if(this.phoneNumber == ""){
        Notify({ type: 'warning', message: '请填写手机号' });
        return
      }
      if(!reg.test(this.phoneNumber)){
        Notify({ type: 'warning', message: '手机号错误' });
        return
      }
      this.starCD = true;
      this.time = 60000;
    },
    // 倒计时结束
    finished() {
      this.starCD = false;
    },
    // 输入验证码
    inputYzm(e) {
      this.sms = e.mp.detail.trim();
    },
    // 保存此号码供以后授权使用
    saveToGrant(e) {
      this.checked = e.mp.detail;
    },
    // 保存
    savePhone() {
      let that = this;
      if(this.phoneNumber == ""){
         Notify({ type: 'warning', message: '请填写手机号' });
        return
      }
      if(this.sms == ""){
         Notify({ type: 'warning', message: '请填写验证码' });
        return
      }
      if(!reg.test(this.phoneNumber)){
        Notify({ type: 'warning', message: '手机号错误' });
        return
      }
      this.loadingBtn = true;
      this.$store.commit("setTelphone", this.phoneNumber);
      wx.showToast({
        title: '保存成功',
        icon: 'success',
        success: function() {
          setTimeout(() => {
            wx.navigateTo({
              url: '/pages/personalInformation/main'
            })
            that.loadingBtn = false;
          }, 1500);
        }
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .form{
    width: 100%;
    margin-top: 10px;
  }
  .set-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 45px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #fff;
    font-size: 16px;
    margin-top: 10px;
  }
  .submit-btn{
    width: 92%;
    margin: 40px 4%;
    border-radius:5px;
  }
}
</style>
